<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>机构入驻 - {$config.WEB_SITE_TITLE}</title>
    <script src="__PUBLIC__/Home/js/adaptive.js"></script>
    <script src="__PUBLIC__/Home/js/device.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/Home/css/reset.css">
    <link rel="stylesheet" href="__PUBLIC__/Home/css/con-header.css">
    <script src="__PUBLIC__/Home/js/mui.min.js"></script>
    <link href="__PUBLIC__/Home/css/mui.min.css" rel="stylesheet"/>

    <link href="__PUBLIC__/Home/city/mui.picker.css" rel="stylesheet"/>
    <link href="__PUBLIC__/Home/city/mui.poppicker.css" rel="stylesheet"/>

    <style>
        h4,h5{margin-top: 0px;margin-bottom: 0px;}
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #9B9B9B;font-size: 0.3rem;
        }

        .content{width: 7.5rem;height: auto;margin: 0 auto;background: #fff;margin-top: 0.88rem;z-index: 10;padding-bottom: 1rem;}
        .top a{position: absolute;right: 0.3rem;bottom: 0.1rem;color: #fff;}
        .top{z-index: 100!important;}


        .xiugai{width: 100%;height: auto;padding: 0px 0.2rem;background: #fff}
        .xiugai li{width: 100%;height: auto;border-bottom: 1px solid #DEDEDE;color: #4A4A4A;line-height: 0.9rem;position: relative;font-size: 0.32rem;}
        .xiugai li input{width: 5.5rem;height: 0.88rem;border: none;outline: none;position: absolute;left: 1.5rem;text-align: right;line-height: 0.8rem; }
        .xiugai li:nth-child(5){border-bottom: none;height: 2rem;position: relative}
        .xiugai li:nth-child(4) span{float: right;font-size: 0.3rem;color: #999}
        .xiugai li:nth-child(4) span img{width: 0.2rem;height: 0.3rem;margin-left: 0.1rem;position: relative;top: 0.05rem;}
        .xiugai li textarea{width: 100%;height: 2rem;resize: none;border: none;top: 0px;}

        .xiugai li:nth-child(6) input{width: 5.3rem}
        .xiugai .kec{border-bottom: none}
        .xiugai li:nth-child(6) a{color: #333;}
        .xiugai li .img_num{color: #333;float: right}

        .shanchu a{float: right}



        /*添加图片*/
        .btm-tijiao{position: relative;padding:0.3rem;}
        .btm-tijiao .add{width: 2rem; height: 2rem;float: left;}
        .btm-tijiao input[type=file]{float: left;
            background-size:cover;width: 100px;height: 100px;text-decoration: none;position: absolute;left: 0.3rem;top: 0.3rem;opacity: 0;}
        .next{width: 90%;height: 0.9rem;border-radius: 0.5rem;display: block;line-height: 0.9rem;
        ;text-align: center;background: #19B7BE;color: #fff;font-size: 0.32rem;margin-top: 1rem;}

        .btm-tijiao .s-img{width: 100%;height: auto}
        .btm-tijiao .s-img li{float: left;margin-right: 0.2rem;}
        .btm-tijiao .s-img li img{width: 2rem; height: 2rem}
        .mendian{font-size: 0.34rem;padding-left:0.3rem;box-sizing: border-box;margin-top: 0.5rem; }


        /*添加视频*/
       .addvideo{width: 100%;height:3.6rem;background: #EEEEEE;}
       .addvideo img{margin-top: 1.2rem;}
    </style>
</head>
<body>


<div class="content">
    <div class="top">
        <h4>入驻机构</h4>
        <span class="back"></span>
    </div>
    <form action="" method="post">
    <ul class="xiugai">
        <li>商家名称 <input type="text" name="name"></li>
        <li>收货人 <input type="text" name="accept" ></li>
        <li>联系地址 <input type="text" name="dress"></li>
        <li>所在地区 <span><input type="text" name="" class="openarea" placeholder="请选择地区" readonly="readonly"> <img src="__PUBLIC__/Home/img/back-right.png" alt=""></span></li>
        <li><textarea name="desc" id="t1" cols="30" rows="10" placeholder="详细地址"></textarea></li>
        <li>生源数量 <input type="text" name="student"><a style="float: right">人</a></li>
        <li>机构课程</li>
        <li class="kec"><textarea name="lessen" id="t2" cols="30" rows="10" placeholder="请填写机构课程"></textarea></li>

        <li>门头照片 <span class="img_num">(<span class="numss">0</span>/6)</span></li>
    </ul>
    <!--添加图片-->
    <div class="btm-tijiao">

        <img src="__PUBLIC__/Home/img/addimg.png" alt="" class="add">
        <input type="file" name="file" id="file"  accept="image/*" onchange="showPic(this)" multiple="multiple"  >
        <ul class="s-img">
            <li><img src="" alt=""></li>
        </ul>
    </div>

 <div style="clear: both"></div>
    <p class="mendian">门店视频</p>


    <div class="addvideo">
        <img src="__PUBLIC__/Home/img/add.png" alt="" class="juzhong">
        <p style="text-align: center">添加视频</p>
        <input type="hidden" name="pro" class="pro">
        <input type="hidden" name="city" class="city">
        <input type="hidden" name="area" class="area">
        <input type="hidden" name="imgs" class="imsg">
    </div>
    </form>

    <!-- <a href="{:U('User/Admission_mec_next')}" class="juzhong next">下一步</a> -->
    <button  class="juzhong next" type="submit" style="text-align: center;"> 下一步</button>
</div>
<script src="__PUBLIC__/Home/js/jquery-1.11.1.js"></script>

<script src="__PUBLIC__/Home/city/city.data-3.js"></script>
<script src="__PUBLIC__/Home/city/mui.picker.js"></script>
<script src="__PUBLIC__/Home/city/mui.poppicker.js"></script>
<script type="text/javascript">
     $(".openarea").click(function () {
           //触发事件
             var adressStr = '';
            //显示几层，我们要显示省、市、区，所以我们这里写三层，如果不写默认是一层
            var addressPicker = new mui.PopPicker({
                layer: 3
            });
            addressPicker.setData(cityData3);
            //city.data-3.js中的数据

            addressPicker.show(function (selectItems) {
               var pro_n=selectItems[0]['value'];
               var city_n=selectItems[1]['value'];
               var area_n=selectItems[2]['value'];
               //var local=pro+'-'+city+'-'+area
               
               $(".pro").val(pro_n);
               $(".city").val(area_n);
               $(".area").val(area_n);
               console.log(pro_n)
                //将选择的省、市、区显示到屏幕上
                for (var i = 0; i < selectItems.length; i++) {
                    adressStr = adressStr+'  '+selectItems[i].text;
                    
                }
                $(".openarea").val(adressStr);
                // 显示标签
                $(".dizhi").html(adressStr) ;
            });
         })

</script>
<script>
    $(".back").click(function () {
        window.history.back(-1);
    })




</script>

<script>
    var img=new Array()
    function showPic(e) {
        let n=0
        let  file=e.files[0]
        //创建读取文件的对象
        var reader = new FileReader();

        //创建文件读取相关的变量
        var imgFile;

        //为文件读取成功设置事件
        reader.onload=function(e) {
            // alert('文件读取完成');
            imgFile = e.target.result;
             img.push(imgFile)
           // console.log(imgFile);
            n++;
            if(n<=5){
                $(".s-img").append("<li><img src='' class='limg'></li>");
                $(".s-img li:last").find(".limg").attr("src",imgFile);
               
            }else{

            }
        };
        
        //正式读取文件
        reader.readAsDataURL(file);
        $(".numss").html(img.length+1)

    }

    $(".next").click(function(){   
       var imgsss=img.join('|'); 
            $(".imsg").val(imgsss)
       $("form").submit()     
    })
</script>
</body>
</html>